<template>
  <div class="container">
    <h2>宠物领养申请管理</h2>



    <!-- 显示申请列表 -->
    <table class="user-table">
      <thead>
      <tr>
        <th>宠物名</th>
        <th>宠物类型</th>
        <th>宠物品种</th>
        <th>宠物年龄</th>
        <th>宠物所在地</th>
        <th>申请人姓名</th>
        <th>申请人联系方式</th>

        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(application, index) in filteredApplications" :key="application.id">
        <td>{{ application.petname }}</td>
        <td>{{ application.pettype }}</td>
        <td>{{ application.breed }}</td>
        <td>{{ application.age }}</td>
        <td>{{ application.location }}</td>
        <td>{{ application.ownername }}</td>
        <td>{{ application.contact }}</td>

        <td>
          <button @click="confirmAccept(application.id,index)">同意申请</button>
          <button @click="confirmReject(application.id,index)">拒绝申请</button>
        </td>
      </tr>
      </tbody>
    </table>
    <div v-if="applicationPet" class="message">{{ applicationPet }}</div>
    <div v-if="filteredApplications.length === 0">
      <p>目前没有符合条件的申请信息。</p>
    </div>
  </div>
</template>

<script>
import { findAllReceive ,updateStatus} from "../../api/admins";

export default {
  data() {
    return {
      petNameSearch: "",
      applicantNameSearch: "",
      applicationPet: '',
      applications: [] // 初始化为空数组
    };
  },
  computed: {
    filteredApplications() {
      return this.applications.filter(application => {
        const matchesPetName = application.petname.toLowerCase().includes(this.petNameSearch.toLowerCase());
        const matchesApplicantName = application.ownername.toLowerCase().includes(this.applicantNameSearch.toLowerCase());
        return matchesPetName && matchesApplicantName;
      });
    }
  },
  methods: {
    async fetchApplications() {
      try {
        const response = await findAllReceive();
          console. log(response.data)
          this.applications = response.data.data; // 将返回的数据赋值给 applications

      } catch (error) {
        console.error("Failed to fetch applications:", error);
      }
    },
    confirmAccept(index,id) {
      const isConfirmed = window.confirm("您确定要同意该申请吗？");
      if (isConfirmed) {
        const a ={
          id: index,
          status: "1"
        }
        updateStatus(a)
        this.acceptApplication(id);
      }
    },
    confirmReject(index,id) {
      const isConfirmed = window.confirm("您确定要拒绝该申请吗？");
      if (isConfirmed) {
        const a ={
          id: index,
          status: "0"
        }
        updateStatus(a)
        this.rejectApplication(id);
      }
    },
    acceptApplication(index) {
      // 接受申请，移除该列
      this.applications.splice(index, 1);
      this.applicationPet = `已同意该申请！`;
      // 2秒后清除提示信息
      setTimeout(() => {
        this.applicationPet = '';
      }, 2000);
    },
    rejectApplication(index) {
      // 拒绝申请，移除该列
      this.applications.splice(index, 1);
      this.applicationPet = `已拒绝该申请！`;
      // 2秒后清除提示信息
      setTimeout(() => {
        this.applicationPet = '';
      }, 2000);
    }
  },
  mounted() {
    this.fetchApplications();
  }
};
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px;
  font-family: 'Arial', sans-serif;
  background-color: #f7f7f7;
}
h2 {
  font-size: 24px;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}
.search-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.search-container input {
  padding: 10px;
  width: 300px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: border-color 0.3s ease;
}
.search-container input:focus {
  border-color: #5b9bd5;
  outline: none;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
tr:hover {
  background-color: #fafafa;
}
th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
th {
  background-color: #f4f4f4;
  cursor: pointer;
  font-weight: bold;
  position: relative;
}
th:hover {
  background-color: #e2e2e2;
}
th span {
  position: absolute;
  right: 10px;
  font-size: 14px;
}
button {
  padding: 6px 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-right: 10px;
}
button:hover {
  background-color: #45a049;
}
button:disabled {
  background-color: #dcdcdc;
  cursor: not-allowed;
}
button:last-child {
  margin-right: 0;
}
.message {
  color: green;
  font-size: 1rem;
  text-align: center;
  margin-top: 20px;
}
</style>